<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="日期" prop="cDate">
        <el-date-picker
          v-model="queryParams.cDate"
          type="date"
          size="small"
          value-format="yyyy-MM-dd"
          @keyup.enter.native="handleQuery"
          placeholder="请输入查询日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['scrball:all:add']"
        >新增</el-button>
      </el-col>
      <!--<el-col :span="1.5">-->
        <!--<el-button-->
          <!--type="success"-->
          <!--plain-->
          <!--icon="el-icon-edit"-->
          <!--size="mini"-->
          <!--:disabled="single"-->
          <!--@click="handleUpdate"-->
          <!--v-hasPermi="['scrball:all:edit']"-->
        <!--&gt;预览</el-button>-->
      <!--</el-col>-->



      <!--&lt;!&ndash;<el-col :span="1.5">&ndash;&gt;-->
        <!--&lt;!&ndash;<el-button&ndash;&gt;-->
          <!--&lt;!&ndash;type="danger"&ndash;&gt;-->
          <!--&lt;!&ndash;plain&ndash;&gt;-->
          <!--&lt;!&ndash;icon="el-icon-delete"&ndash;&gt;-->
          <!--&lt;!&ndash;size="mini"&ndash;&gt;-->
          <!--&lt;!&ndash;:disabled="multiple"&ndash;&gt;-->
          <!--&lt;!&ndash;@click="handleDelete"&ndash;&gt;-->
          <!--&lt;!&ndash;v-hasPermi="['scrball:all:remove']"&ndash;&gt;-->
        <!--&lt;!&ndash;&gt;删除</el-button>&ndash;&gt;-->
      <!--&lt;!&ndash;</el-col>&ndash;&gt;-->
      <!--&lt;!&ndash;<el-col :span="1.5">&ndash;&gt;-->
        <!--&lt;!&ndash;<el-button&ndash;&gt;-->
          <!--&lt;!&ndash;type="warning"&ndash;&gt;-->
          <!--&lt;!&ndash;plain&ndash;&gt;-->
          <!--&lt;!&ndash;icon="el-icon-download"&ndash;&gt;-->
          <!--&lt;!&ndash;size="mini"&ndash;&gt;-->
          <!--&lt;!&ndash;@click="handleExport"&ndash;&gt;-->
          <!--&lt;!&ndash;v-hasPermi="['scrball:all:export']"&ndash;&gt;-->
        <!--&lt;!&ndash;&gt;导出</el-button>&ndash;&gt;-->
      <!--&lt;!&ndash;</el-col>&ndash;&gt;-->
      <!--<el-col :span="1.5">-->
        <!--<el-button-->
          <!--type="warning"-->
          <!--plain-->
          <!--icon="el-icon-download"-->
          <!--size="mini"-->
          <!--:disabled="single"-->
          <!--@click="handleDownload"-->
          <!--v-hasPermi="['scrball:all:export']"-->
        <!--&gt;下载</el-button>-->
      <!--</el-col>-->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="allList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="日期" align="center" prop="cDate" />
      <el-table-column label="能源公司" align="center" prop="cNygs" />
      <el-table-column label="氢冶金公司" align="center" prop="cQyj" />
      <el-table-column label="金属材料公司" align="center" prop="cJhcl" />
      <el-table-column label="龙翔金属公司" align="center" prop="cLxjs" />
      <el-table-column label="特材公司" align="center" prop="cTcgs" />
      <el-table-column label="金属制品公司" align="center" prop="cJszp" />
      <el-table-column label="设备能源部" align="center" prop="cSbnyb" />
      <el-table-column label="气体公司" align="center" prop="cQtgs" />
      <el-table-column label="环保中心" align="center" prop="cHbzx" />
      <el-table-column label="生产处" align="center" prop="cScc" />
      <!--<el-table-column label="删除标志" align="center" prop="cState" />-->
      <!--<el-table-column label="备注" align="center" prop="remake" />-->


      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['scrball:all:edit']"
          >预览</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleDownload(scope.row)"
            v-hasPermi="['scrball:all:export']"
          >下载</el-button>
          <!--<el-button-->
            <!--size="mini"-->
            <!--type="text"-->
            <!--icon="el-icon-delete"-->
            <!--@click="handleDelete(scope.row)"-->
            <!--v-hasPermi="['scrball:all:remove']"-->
          <!--&gt;删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改生产日报总表对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="日期" prop="cDate" >
          <el-date-picker
            v-model="form.cDate"
            :disabled=!isInsert
            type="date"
            size="small"
            value-format="yyyy-MM-dd"
            placeholder="请输入日期">
          </el-date-picker>
        </el-form-item>
      </el-form>

      <!--<div class="table">-->
        <!--<div v-html="ExcelText"></div>-->
      <!--</div>-->
      <!--<el-form ref="form" :model="form" :rules="rules" label-width="80px">-->
        <!--<el-form-item label="能源公司" prop="cNygs">-->
          <!--<el-input v-model="form.cNygs" placeholder="请输入能源公司" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="氢冶金公司" prop="cQyj">-->
          <!--<el-input v-model="form.cQyj" placeholder="请输入氢冶金公司" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="金属材料公司" prop="cJhcl">-->
          <!--<el-input v-model="form.cJhcl" placeholder="请输入金属材料公司" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="龙翔金属公司" prop="cLxjs">-->
          <!--<el-input v-model="form.cLxjs" placeholder="请输入龙翔金属公司" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="特材公司" prop="cTcgs">-->
          <!--<el-input v-model="form.cTcgs" placeholder="请输入特材公司" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="金属制品公司" prop="cJszp">-->
          <!--<el-input v-model="form.cJszp" placeholder="请输入金属制品公司" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="设备能源部" prop="cSbnyb">-->
          <!--<el-input v-model="form.cSbnyb" placeholder="请输入设备能源部" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="气体公司" prop="cQtgs">-->
          <!--<el-input v-model="form.cQtgs" placeholder="请输入气体公司" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="环保中心" prop="cHbzx">-->
          <!--<el-input v-model="form.cHbzx" placeholder="请输入环保中心" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="生产处" prop="cScc">-->
          <!--<el-input v-model="form.cScc" placeholder="请输入生产处" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="删除标志" prop="cState">-->
          <!--<el-input v-model="form.cState" placeholder="请输入删除标志" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="备注" prop="remake">-->
          <!--<el-input v-model="form.remake" placeholder="请输入备注" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree1">-->
          <!--<el-input v-model="form.zfree1" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree2">-->
          <!--<el-input v-model="form.zfree2" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree3">-->
          <!--<el-input v-model="form.zfree3" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree4">-->
          <!--<el-input v-model="form.zfree4" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree5">-->
          <!--<el-input v-model="form.zfree5" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree6">-->
          <!--<el-input v-model="form.zfree6" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree7">-->
          <!--<el-input v-model="form.zfree7" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree8">-->
          <!--<el-input v-model="form.zfree8" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree9">-->
          <!--<el-input v-model="form.zfree9" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree10">-->
          <!--<el-input v-model="form.zfree10" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree11">-->
          <!--<el-input v-model="form.zfree11" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree12">-->
          <!--<el-input v-model="form.zfree12" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree13">-->
          <!--<el-input v-model="form.zfree13" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree14">-->
          <!--<el-input v-model="form.zfree14" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree15">-->
          <!--<el-input v-model="form.zfree15" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree16">-->
          <!--<el-input v-model="form.zfree16" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree17">-->
          <!--<el-input v-model="form.zfree17" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree18">-->
          <!--<el-input v-model="form.zfree18" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree19">-->
          <!--<el-input v-model="form.zfree19" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree20">-->
          <!--<el-input v-model="form.zfree20" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
      <!--</el-form>-->

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listAll, getAll, delAll, addAll, updateAll } from "@/api/scrball/all";

import { getCl } from "@/api/scrb/cl";
import { getDl } from "@/api/scrb/dl";
import { getFgjg } from "@/api/scrb/fgjg";
import { getHbzx } from "@/api/scrb/hbzx";
import { getJh } from "@/api/scrb/jh";
import { getJscl } from "@/api/scrb/jscl";
import { getJszpgs } from "@/api/scrb/jszpgs";
import { getQyj } from "@/api/scrb/qyj";
import { getSbnyb } from "@/api/scrb/sbnyb";
import { getScc } from "@/api/scrb/scc";
import { getTc } from "@/api/scrb/tc";

import XLSX from "xlsx";
import axios from 'axios';

export default {
  name: "All",
  //dicts: ['sys_state_type'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 生产日报总表表格数据
      allList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        cDate: null,
        pageNum: 1,
        pageSize: 10,
        cNygs: null,
        cQyj: null,
        cJhcl: null,
        cLxjs: null,
        cTcgs: null,
        cJszp: null,
        cSbnyb: null,
        cQtgs: null,
        cHbzx: null,
        cScc: null,
        cState: null,
        remake: null,
        zfree1: null,
        zfree2: null,
        zfree3: null,
        zfree4: null,
        zfree5: null,
        zfree6: null,
        zfree7: null,
        zfree8: null,
        zfree9: null,
        zfree10: null,
        zfree11: null,
        zfree12: null,
        zfree13: null,
        zfree14: null,
        zfree15: null,
        zfree16: null,
        zfree17: null,
        zfree18: null,
        zfree19: null,
        zfree20: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      isInsert:true,
      riqi: this.formatDate(new Date(),"yyyy-MM"),
      ExcelText: null,

      clform:{},
      fgjgform:{},
      hbzxform:{},
      jhform:{},
      jsclform:{},
      jscldlform:{},
      jszpgsform:{},
      qyjform:{},
      sbnybform:{},
      sccform:{},
      tcform:{},

      clopen:false,
      fgjgopen:false,
      hbzxopen:false,
      jhopen:false,
      jsclopen:false,
      jscldlopen:false,
      jszpgsopen:false,
      qyjopen:false,
      sbnybopen:false,
      sccopen:false,
      tcopen:false,

    };
  },
  created() {
    this.getList();
  },
  computed: {
    // 计算属性在某些场景下（此示例），要比侦听器代码精简。
    excelURL() {
      // return '/prod-api/profile/zhuanxing/'+this.riqi + '.xlsx';
      // return '/dev-api/profile/profile/aaa.xlsx';

      return '/dev-api/scrball/all/download';
    }
  },
  methods: {
    /** 查询生产日报总表列表 */
    getList() {
      this.loading = true;
      listAll(this.queryParams).then(response => {
        this.allList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        cDate: null,
        cNygs: null,
        cQyj: null,
        cJhcl: null,
        cLxjs: null,
        cTcgs: null,
        cJszp: null,
        cSbnyb: null,
        cQtgs: null,
        cHbzx: null,
        cScc: null,
        cState: null,
        remake: null,
        zfree1: null,
        zfree2: null,
        zfree3: null,
        zfree4: null,
        zfree5: null,
        zfree6: null,
        zfree7: null,
        zfree8: null,
        zfree9: null,
        zfree10: null,
        zfree11: null,
        zfree12: null,
        zfree13: null,
        zfree14: null,
        zfree15: null,
        zfree16: null,
        zfree17: null,
        zfree18: null,
        zfree19: null,
        zfree20: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.cDate)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.isInsert=true;
      this.title = "添加生产日报总表";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      // this.getExcelText();
      this.isInsert=false;
      const cDate = row.cDate || this.ids

      // getAll(cDate).then(response => {
      //   this.form = response.data;
      //   this.open = true;
      //   this.title = "预览生产日报总表";
      // });
      getCl(cDate).then(response => {
        this.clform = response.data;
        this.clopen = true;
        this.title = "预览生产日报总表";
      });

      getFgjg(cDate).then(response => {
        this.fgjgform = response.data;
        this.fgjgopen = true;
        this.title = "预览生产日报总表";
      });

      getHbzx(cDate).then(response => {
        this.hbzxform = response.data;
        this.hbzxopen = true;
        this.title = "预览生产日报总表";
      });
      getJh(cDate).then(response => {
        this.jhform = response.data;
        this.jhopen = true;
        this.title = "预览生产日报总表";
      });
      getJscl(cDate).then(response => {
        this.jsclform = response.data;
        this.jsclopen = true;
        this.title = "预览生产日报总表";
      });
      getDl(cDate).then(response => {
        this.jscldlform = response.data;
        this.jscldlopen = true;
        this.title = "预览生产日报总表";
      });
      getJszpgs(cDate).then(response => {
        this.jszpgsform = response.data;
        this.jszpgsopen = true;
        this.title = "预览生产日报总表";
      });
      getQyj(cDate).then(response => {
        this.qyjform = response.data;
        this.qyjopen = true;
        this.title = "预览生产日报总表";
      });
      getSbnyb(cDate).then(response => {
        this.sbnybform = response.data;
        this.sbnybopen = true;
        this.title = "预览生产日报总表";
      });
      getScc(cDate).then(response => {
        this.sccform = response.data;
        this.sccform = true;
        this.title = "预览生产日报总表";
      });
      getTc(cDate).then(response => {
        this.tcform = response.data;
        this.tcopen = true;
        this.title = "预览生产日报总表";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (!this.isInsert) {
            updateAll(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addAll(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const cDates = row.cDate || this.ids;
      this.$modal.confirm('是否确认删除生产日报总表编号为"' + cDates + '"的数据项？').then(function() {
        return delAll(cDates);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('scrball/all/export', {
        ...this.queryParams
      }, `all_${new Date().getTime()}.xlsx`)
    },
    /** 下载按钮操作 */
    handleDownload(row) {
      this.queryParams.cDate=row.cDate || this.ids
      this.download('scrball/all/download', {
        ...this.queryParams
      }, `生产日报${row.cDate}.xls`)
    },
    getExcelText() {
      axios.get(this.excelURL,{
        responseType: "arraybuffer", // 设置响应体类型为arraybuffer
      }).then(({data})=> {
        console.log(data);
        let workbook = XLSX.read(new Uint8Array(data), {type:"array"}); // 解析数据
        var worksheet = workbook.Sheets[workbook.SheetNames[0]]; // workbook.SheetNames 下存的是该文件每个工作表名字,这里取出第一个工作表
        this.ExcelText = XLSX.utils.sheet_to_html(worksheet); // 渲染
      })
    },
    formatDate(date,fmt) {
      if(/(y+)/.test(fmt)){
        fmt = fmt.replace(RegExp.$1,(date.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      let o ={
        'M+': date.getMonth()+1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      };
      for (let k in o){
        if(new RegExp(`(${k})`).test(fmt))
        {
          let str = o[k] + '';
          fmt=fmt.replace(RegExp.$1,(RegExp.$1.length===1)?str:this.padLeftZero(str))
        }

      }
      return fmt
    },
    padLeftZero(str){
      return ('00' + str).substr(str.length)
    },
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
  .table {
    border-collapse: collapse;
    width: 100%;
    /*margin: 0 auto;*/
    text-align: center;
  }

  .table td, .table th {
    border: 2px solid #000000;
    color: #000000;
    height: 30px;
  }

  .table thead th {
    background-color: #CCE8EB;
    /*width: 100px;*/
  }

  .table tr:nth-child(odd) {
    background: #fff;
  }

  .table tr:nth-child(even) {
    background: #F5FAFA;
  }
</style>
